<template>
	<div class="share-page">
		<el-breadcrumb separator=">">
			<el-breadcrumb-item>订单管理</el-breadcrumb-item>
			<el-breadcrumb-item :to="{ path: '/abnormal' }">短信黑名单</el-breadcrumb-item>
		</el-breadcrumb>
		<div class="abnormal-page">
      <div class="add">
        <el-button round  color="#0071bb" :icon="Plus" @click="onAdd()">新增黑名单</el-button>
      </div>
          <!-- 搜索条件 -->
          <el-form style="width:100%;display:flex;">
            <el-form-item label="客户手机号">
              <el-date-picker  type="datetime" placeholder="请输入客户手机号码" style="width: 220px;" :suffix-icon="CaretBottom" />
            </el-form-item>
            <el-form-item style="margin-left:20px">
              <el-button round :icon="Search" color="#0071bb">查询</el-button>
					    <el-button round :icon="RefreshLeft">重置</el-button>
            </el-form-item>
          </el-form>
          <!-- 表格数据 -->
			    <div class="tables">
				    <el-table :data="tableData" style="">
				    	<el-table-column type="selection" v-model="whole" />
				    	<el-table-column prop="id" label="序号" width="80px" />
				    	<el-table-column prop="tel" label="客户手机号" />
				    	<el-table-column prop="time" label="拉黑时间" />
				    	<el-table-column prop="reason" label="拉黑原因" />
              <el-table-column prop="" label="操作">
			    		  <template #default="scope">
                  <el-button  color="#0071bb">移除</el-button>
                </template>
              </el-table-column>
				    </el-table>
            <!-- 底部分页 -->
		        <div class="page_number">
		        	<el-pagination v-model:current-page="pager.currentPage" v-model:page-size="pager.pageSize" 
		        		:disabled="!pager.total"  layout="prev, pager, next, jumper,total" :total="pager.total"
		        		@size-change="handleSizeChange" @current-change="handleCurrentChange"/>
		        </div>
			    </div>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { CaretBottom, Refresh, HelpFilled, Search, RefreshLeft, Plus} from '@element-plus/icons-vue'
import { useRouter } from 'vue-router';
const router = useRouter();
const whole = ref(false)
const tableData = [
	{
		id: '1',
		time: '2024-05-15',
		reason: '未及时付款',
      	tel:'13306236880'
	},
    {
		id: '2',
		time: '2024-05-15',
		reason: '未及时付款',
      	tel:'13306236880'
	},
    {
		id: '3',
		time: '2024-05-15',
		reason: '未及时付款',
      	tel:'13306236880'
	},
	]
  // 分页
const pager = ref({
	currentPage:1,
	pageSize:10,
	total:10,
})
// 改变pageSize
const handleSizeChange = (val : number) => {
	console.log(`${val} items per page`)
}
// 改变当前页码 currentPage
const handleCurrentChange = (val : number) => {
	console.log(`current page: ${val}`)
}
// 跳转新增黑名单路由
const onAdd = () => {
  router.push('/add_blacklist');
}
const show= ref<boolean>(false)
// 打开弹窗
const onShow = () => {
  show.value = true
}
// 提交
const onSubmit = () => {
	show.value = false
}
// 关闭
const onClose = () => {
	show.value = false
}
</script>

<style lang="scss" scoped>
	.abnormal-page {
		background-color: #fff;
		margin-top: 10px;
		padding: 10px;

		.title {
			font-size: 16px;
		}
    .add{
      margin-bottom:10px;
    }

		.btn-box {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-left: 20px;
		}
		.tables {
			margin-top: 20px;
			.check-text {
				color: #0071bb;
				cursor: pointer;
			}
			.handle {
				color: #2686c5;
			}
			.abnormal {
				color: #ff4141;
			}
		}
	}
</style>